<script lang='ts' setup>
import { appRef } from "@/models/app.ref";
import { MessagePlugin } from "tdesign-vue-next";
import { ref, defineProps, onMounted } from "vue";
import { noteService } from "@/services/note.service";
import { NoteInfo } from "@/models/Note";
defineProps<{ visible: boolean }>();
const emit = defineEmits(["close"]);
const list = ref([] as NoteInfo[]);
const page = ref(0);
const number = ref(0);

onMounted(() => {
  getList();
});

function getList(): void {
  noteService.mineList(page.value, number.value).then((res) => {
    list.value = res;
  });
}
</script>
<template>
  <t-drawer :visible="visible" header="留言列表" @close="emit('close')" :footer="false">
    <div class="box flex-c animated fadeInUp" v-for="item in list" :key="item.uid" :style="{background: item.bgcolor}">
      <div class="text">{{item.remark }}</div>
      <div class="flex user">
        <img v-if="item.user.avatar" class="cover" :src="item.user.avatar" alt="">
        <span class="name"> {{item.user.nick}} </span>
      </div>
    </div>
  </t-drawer>
</template>
<style lang='scss' scoped>
.box {
  width: 100%;
  padding: 10px 12px;
  border-radius: 7px;
  box-shadow: 0 0 10px #00000048;
  margin-bottom: 20px;
  &:hover {
    box-shadow: 0 0 20px #00000071;
    z-index: 9;
  }
  .text {
    width: 100%;
    display: block;
    font-size: 20px;
  }
  .user {
    width: 100%;
    margin-top: 10px;
    color: #292929;
    font-size: 14px;
    .cover {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 7px;
    }
  }
}
</style>